.sp {
	
	&- {
		
		// 医院导航
		&navigation {
			
			&__ {
				
				&header {
					.back-color(#fff);
					padding: 24rpx;
					box-shadow: 0px 0px 26rpx 0px rgba(0,0,0,0.06);
					border-radius: 0px 0px 40rpx 40rpx;
					
					&- {
						
						&info {
							.flex();
							
							& > image {
								display: block;
								.square(120);
								margin-right: 26rpx;
							}
						}
						
						&name {
							flex: 1;
							
							label {
								display: block;
								.font(36, 50, #222, left);
								padding: 0 0 14rpx;
							}
							
							text {
								.font(20, 20, #666);
								.back-color(#F6F6F6);
								.radius(6);
								padding: 7rpx 20rpx;
							}
						}
						
						&desc {
							margin-top: 24rpx;
							.font(30, 42, #222, left);
						}
						
						
						&about {
							margin-top: 24rpx;
							.font(30, 42, #666, left);
							
							text {
								color: #6582F9;
							}
						}
						
						&main {
							position: relative;
							margin-top: 20rpx;
							border-top: 1px solid #eee;
							padding-top: 20rpx;
							.font(26, 36, #bbb, left);
						}
						
						&control {
							.f-end();
						}
						
						&open {}
						
						&close {
							padding: 8rpx 10rpx;
							.font(20, 20, #BBBBBB);
							.back-color(#F9FAFB);
						}
					}
				}
				
				&menu {
					.back-color(#fff);
					width: 702rpx;
					margin: 36rpx auto 0;
					padding: 0 18rpx;
					.radius(20);
					.boxing();
					
					&- {
						
						&item {
							position: relative;
							.flex();
							height: 102rpx;
							
							&:not(:first-child):after {
								content: '';
								position: absolute;
								top: 0;
								left: 6rpx;
								right: 6rpx;
								height: 1rpx;
								background: #eee;
							}
							
							& > image {
								display: block;
								.square(54);
								margin-right: 14rpx;
							}
							
							text {
								.font(30, 30, #222);
							}
						}
					}
				}
				
				&map {
					position: relative;
					height: 100%;
					
					map {
						width: 100%;
						height: 100%;
					}
					
					&- {
						
						&control {
							position: absolute;
							width: 100%;
							height: 120rpx;
							bottom: 0;
							left: 0;
							z-index: 11;
							.back-color(#fff);
							.shadow(0px 0px 26rpx 0px rgba(0,0,0,0.06));
							border-radius: 20px 20px 0px 0px;
						}
						
						&nav {
							.flex();
							
							& > view {
								flex: 1;
								.f-center();
								
								image,
								text {
									display: block;
								}
								
								text {
									.font(30, 42, #222);
									margin-left: 10rpx;
								}
							}
							
							&1 {
								
								image {
									.size(24, 30);
								}
							}
							
							&2 {
								
								image {
									.size(38, 30);
								}
							}
							
							&3 {
								
								image {
									.size(20, 30);
								}
							}
							
							&4 {
								
								image {
									.size(30, 30);
								}
							}
							
							&5,
							&6 {
								
								image {
									.size(32, 30);
								}
							}
							
							&7 {
								
								image {
									.size(31, 30);
								}
							}
						}
					}
				}
			}
		}
		
		// 科室选择
		&depart {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			
			&__ {
				
				&panel {
					flex: 1;
					flex-grow: 1;
					flex-shrink: 1;
					.flex();
					width: 100%;
					height: 0;
					overflow: hidden;
				}
				
				&scroll {
					width: 300rpx;
					height: 100%;
					overflow: scroll;
					.back-color(#F9FAFB);
					
					&- {
						
						&item {
							height: 100rpx;
							.font(32, 100, #666, left);
							padding-left: 50rpx;
							.transition();
							
							&.active {
								color: #6582F9;
								.back-color(#fff);
							}
						}
					}
				}
				
				&main {
					flex: 1;
					height: 100%;
					overflow: scroll;
					.back-color(#fff);
					padding: 0 30rpx 0 50rpx;
					
					&-item {
						.font(28, 40, #222, left);
						padding: 30rpx 0;
					}
				}
			}
		}
		
		// 医院简介
		// 科室简介
	}
}